<div class="demo-table-filter-top-content">
  <lv-search
    #searchInput
    class="demo-table-filter-search"
    lvPlaceHolder="Search name"
    [(ngModel)]="filtersMap.name"
    (keyup)="updateSearch($event)"
    (lvClear)="updateSearch($event)"
  ></lv-search>

  <button lv-button (click)="toggleListenSearch(false)">Clear listen</button>
  <button lv-button (click)="toggleListenSearch(true, searchInput.value)">Reduction listen</button>
  <button lv-button (click)="clearSort()">Clear sort</button>
</div>

<div [class.demo-table-filter-tag-content]="filterTags.length">
  <lv-tag
    [ngModel]="filterTags"
    [ngModelOptions]="{ standalong: true }"
    [lvTagTemplate]="tagTpl"
    lvShowClearAll
    [lvTrackBy]="trackBy"
    [lvBeforeClearAll]="beforeRemove"
    [lvBeforeRemove]="beforeRemove"
    (lvClearAll)="clearFilterState()"
    (lvRemove)="removeFilterState($event)"
  ></lv-tag>
  <ng-template #tagTpl let-item>
    <div class="lv-tag-text" lv-overflow>{{ item.label.key }}: {{ item.label.value }}</div>
  </ng-template>
</div>

<lv-datatable
  #lvTable
  [lvPaginator]="page"
  [lvData]="data"
  lvCompareWith="id"
  lvSort
  [(lvActiveSort)]="activeSort"
  (lvSortChange)="changeSort($event)"
  (lvStateChange)="stateChange($event)"
>
  <thead>
    <tr>
      <th lvCellKey="name">Name</th>
      <th
        lvCellKey="age"
        lvShowSort
        lvShowFilter
        [(lvFilters)]="filtersMap.age"
        [lvFilterMultiple]="false"
        lvFilterSearch
        (lvFilterChange)="filterChange($event)"
      >
        Age
      </th>
      <th
        lvCellKey="color"
        lvShowSort
        lvShowFilter
        [(lvFilters)]="filtersMap.color"
        lvFilterSearch
        lvFilterAuto
        [lvFilterTemplate]="filterTpl"
        (lvFilterChange)="filterChange($event)"
      >
        Color
      </th>
      <th>Address</th>
      <th
        lvShowFilter
        lvCellKey="random"
        [lvCustomFilter]="customFilterRandom"
        [lvFilters]="filtersMap.random"
        lvFilterCheckAll
        (lvFilterChange)="filterChange($event)"
        lvShowSort
      >
        Random
      </th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let data of lvTable.renderData">
      <tr>
        <td>{{ data.name }}</td>
        <td>{{ data.age }}</td>
        <td>{{ data.color }}</td>
        <td>{{ data.address }}</td>
        <td>{{ data.random }}</td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>
<lv-paginator #page lvPageSize="5" [lvPageSizeOptions]="[5, 10, 50, 100]"></lv-paginator>

<ng-template #filterTpl let-data>
  <span lv-overflow>
    Filter by
    <span [style.color]="data.value">{{ data.label }}</span>
    (long long long long long long suffix)
  </span>
</ng-template>
